<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- <script src='https://d3js.org/d3.v5.js'></script> -->
    <script src="./js/d3.v5.js"></script>
    <title>Document</title>
  </head>
  <body>
    <p>Vue</p>
    <p>React</p>
    <p>Angular</p>
    <button id="datum">datum</button>
    <button id="data">data</button>
    <script>
      // 注意:这里通过d3获取的body和p标签不是对应的dom对象
      const body = d3.select("body");
      const p = body.selectAll("p");
      function doDatum() {
        const str = "Framework";
        p.datum(str);
        p.text(function (d, i) {
          return `${d}-${i}`;
        });
      }
      function doData() {
        const dataset = ["vue", "React", "Angular"];
        p.data(dataset).text(function(d,i){
            return `${d}-${i}`
        })
      }
      document.getElementById("datum").addEventListener("click", function (e) {
        doDatum();
      });
      document.getElementById("data").addEventListener("click", function (e) {
        doData();
      });
    </script>
  </body>
</html>
